<template>
  <div class="app-container">
    <div class="primary-section">
      <div class="right-section">
        <el-button-group size="small">
          <el-button @click="getLockInfo">刷新</el-button>
          <el-button @click="handleSendKey">发送钥匙</el-button>
          <el-button @click="handleGetPwd">获取密码</el-button>
          <el-button><el-icon><Menu /></el-icon></el-button>
        </el-button-group>
        <div class="mt10">
          <span class="font-w">锁状态：已闭锁</span>
        </div>
        <div class="fc-regular mt10">更新于2024-03-18 20:29</div>
        <div class="fc-regular mt10">已更新</div>
      </div>
      <div>
        <div>
          <span class="fs-large font-w">{{ lockInfo ? lockInfo.roomName : '--' }}</span>
          <span class="ml20">{{ lockInfo.lockInfoObj ? lockInfo.lockInfoObj.electricQuantity : '--' }}%</span>
        </div>
        <div class="fc-regular mt10">锁编号：{{ lockInfo.lockInfoObj ? lockInfo.lockInfoObj.lockName : '--' }}</div>
      </div>
    </div>
    <el-radio-group v-model="tabActive" class="mt20 mb20">
      <el-radio-button label="1">电子钥匙</el-radio-button>
      <el-radio-button label="2">密码管理</el-radio-button>
<!--      <el-radio-button label="3">卡管理</el-radio-button>-->
      <el-radio-button label="4">指纹管理</el-radio-button>
      <el-radio-button label="5">操作记录</el-radio-button>
    </el-radio-group>
    <template v-if="lockId">
      <KeyPane v-if="tabActive === '1'" :lockId="lockId" ref="keyPaneRef" />
      <PwdPane v-if="tabActive === '2'" :lockId="lockId" ref="pwdPaneRef" />
      <CardPane v-if="tabActive === '3'" :lockId="lockId" ref="cardPaneRef" />
      <FingerprintPane v-if="tabActive === '4'" :lockId="lockId" ref="fingerprintPaneRef" />
      <OperationPane v-if="tabActive === '5'" :lockId="lockId" ref="operationPaneRef" />
      <send-key-dl :lockId="lockId" :visible="sendKeyVisible" @cancel="handleSendKeyCancel" @ok="handleSendKeyOk" @refresh="refreshCurrentPane"></send-key-dl>
      <GetPwdDl :lockId="lockId" :visible="getPwdVisible" @cancel="handleGetPwdCancel" @ok="handleGetPwdOk" @refresh="refreshCurrentPane"></GetPwdDl>
    </template>
    <el-empty 
      v-else 
      description="请先选择一个门锁"
      :image-size="200"
    >
      <el-button type="primary" @click="handleBack">返回门锁列表</el-button>
    </el-empty>
  </div>
</template>
<script setup name="SmarkLockDetail">
import { Menu, ArrowLeft } from '@element-plus/icons-vue'
import SendKeyDl from './sendKeyDl.vue'
import GetPwdDl from './getPwdDl.vue'
import KeyPane from './pane/keyPane.vue'
import PwdPane from './pane/pwdPane.vue'
import CardPane from './pane/cardPane.vue'
import FingerprintPane from './pane/fingerprintPane.vue'
import OperationPane from './pane/operationPane.vue'
import { useRoute, useRouter } from 'vue-router'
import LockApi from "@/api/device/lock.js";
import { ref, onMounted, watch } from 'vue'

const sendKeyVisible = ref(false)
const getPwdVisible = ref(false)
const tabActive = ref("1")
const form = ref({
  lockId: '',
})
const lockInfo = ref({})
const route = useRoute()
const router = useRouter()
const lockId = ref('')
const detail = ref({})
const activeName = ref('key')

// 添加对各个面板的引用
const keyPaneRef = ref(null)
const pwdPaneRef = ref(null)
const cardPaneRef = ref(null)
const fingerprintPaneRef = ref(null)
const operationPaneRef = ref(null)

onMounted(() => {
  if (route.query.lockId) {
    lockId.value = route.query.lockId
    getLockInfo()
  }
})

watch(() => route.query.lockId, (newId) => {
  if (newId) {
    lockId.value = newId
    getLockInfo()
  } else {
    lockId.value = ''
    detail.value = {}
  }
})

/* 发送钥匙 */
function handleSendKey() {
  sendKeyVisible.value = true
}
function handleSendKeyCancel() {
  sendKeyVisible.value = false
}
function handleSendKeyOk(params) {
  sendKeyVisible.value = false
  refreshCurrentPane()
}
/* 获取密码 */
function handleGetPwd() {
  getPwdVisible.value = true
}
function handleGetPwdCancel() {
  getPwdVisible.value = false
}
function handleGetPwdOk(params) {
  getPwdVisible.value = false
  refreshCurrentPane()
}

function getLockInfo() {
  if (!lockId.value || lockId.value === '') {
    return
  }
  LockApi.getInfo(lockId.value).then(res => {
    const data = res.data
    try {
      data.lockInfoObj = JSON.parse(data.lockInfo)
    } catch (e) {
      // ...
    }
    lockInfo.value = data
  })
}

function handleBack() {
  router.push('/deviceManagement/smartLock')
}

// 刷新当前活动的面板
function refreshCurrentPane() {
  switch (tabActive.value) {
    case '1':
      keyPaneRef.value?.getList?.()
      break
    case '2':
      pwdPaneRef.value?.getList?.()
      break
    case '3':
      cardPaneRef.value?.getList?.()
      break
    case '4':
      fingerprintPaneRef.value?.getList?.()
      break
    case '5':
      operationPaneRef.value?.getList?.()
      break
  }
}
</script>
<style lang="scss" scoped>
.primary-section {
  padding: 12px 16px;
  &::after {
    content: '';
    display: block;
    clear: both;
  }
  .right-section {
    float: right;
    text-align: right;
  }
}

.header {
  display: flex;
  align-items: center;
  padding: 10px 0;
  
  .back {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--el-color-primary);
    margin-right: 20px;
    
    .el-icon {
      margin-right: 5px;
    }
  }
  
  .title {
    font-size: 18px;
    font-weight: bold;
  }
}

.mt20 {
  margin-top: 20px;
}
</style>
